---
title: Tailwind CSS Chip - Components Library @David UI
description: Display tags, filters, or categories with Tailwind CSS chip components. Compact, customizable designs for seamless integration in any project.
github: Chip
prev: docs/html/inputs
next: docs/html/dropdown
---

# Tailwind CSS Chip

David UI's chip component offers a compact way to display tags, filters, or categories. Styled with Tailwind CSS, it supports icons, close actions, and custom styles. 

Try our responsive chip component examples styled with Tailwind CSS that you can use for your web or mobile projects.

---

## Basic Chip

Start your application with this minimalistic chip design featuring a dark-grey background. It's a simple yet versatile foundation for your UI.


<PreviewWithCode relativePath="chip/chip-demo.tsx" language="html" />

---

## Chip Sizes

Discover how to create chips in various sizes, from compact (px-2 py-1) to spacious (px-4 py-2). Adjusting padding values makes it easy to adapt chips for different interface needs.

<PreviewWithCode relativePath="chip/chip-sizes.tsx" language="html" />

---

## Chip Variants

This example showcases four unique chip designs—filled, gradient, outlined, and ghost—highlighting their adaptability for diverse user interface scenarios. Each chip is styled with Tailwind CSS within a consistent structural framework.


<PreviewWithCode relativePath="chip/chip-variants.tsx" language="html" />

---

## Chip Colors

Customize your chips with a palette of 19 color options, including vibrant hues like blue, red, green, and amber. Explore the examples to see these colors applied to bring your designs to life.

<PreviewWithCode relativePath="chip/chip-colors.tsx" language="html" />

---

## Chip Icon

Icons improve the visual appeal of chips, adding context and improving usability. Use this example to incorporate icons for features such as user profiles, settings, or notifications.

<PreviewWithCode relativePath="chip/chip-icon.tsx" language="html" />

---

## Chip Dismissible


This example demonstrates a removable chip with a close icon, enabling users to delete it from the interface. Ideal for tags, filters, or other interactive elements where choices can be added and removed.

<PreviewWithCode relativePath="chip/chip-dismissible.tsx" language="html" />

---

## Chip with Avatar

Combine an avatar with a chip for a visually engaging element that pairs identity with information. Perfect for applications requiring user recognition, like social platforms or dashboards.

<PreviewWithCode relativePath="chip/chip-with-avatar.tsx" language="html" />

---